<template>
  <el-drawer v-model="dialogVisible" title="团购产品">
    <div class="flex flex-row justify-between mb-2">
      <el-button
        plain
        type="primary"
        @click="openForm('create', undefined)"
        v-hasRole="['shop_admin']"
      >
        <Icon class="mr-5px" icon="ep:plus" />
        加入产品
      </el-button>
      <el-button @click="loadTableData">
        <Icon class="mr-5px" icon="ep:refresh" />
        刷新产品
      </el-button>
    </div>
    <ContentWrap>
      <el-card class="box-card !border-none" shadow="never">
        <div class="mt-[5px]">
          <el-table :data="tableData.list" size="large" v-loading="tableData.loading">
            <template #empty>
              <span class="text-red-500">{{ !tableData.loading ? '请先加入产品' : '' }}</span>
            </template>
            <el-table-column label="图片" width="70">
              <template #default="{ row }">
                <el-image
                  class="w-[30px] h-[30px] border border-solid border-gray-50 cursor-pointer"
                  :src="row.picUrl || '/placeholder.png'"
                  :preview-src-list="[row.picUrl || '/placeholder.png']"
                  preview-teleported
                />
              </template>
            </el-table-column>
            <el-table-column label="名称" min-width="160">
              <template #default="{ row }">
                <div class="flex flex-col items-start justify-start">
                  <span>{{ row.name || '未知' }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="单价" min-width="120">
              <template #default="{ row }">
                <p>
                  <span class="text-orange-500">¥{{ fenToYuan(row.price) }}</span>
                  <span class="text-orange-500 line-through ml-5px"
                    >¥{{ fenToYuan(row.originPrice) }}</span
                  >
                </p>
              </template>
            </el-table-column>
            <el-table-column label="数量" min-width="120">
              <template #default="{ row }">
                <p
                  ><span class="text-orange-500">{{ row.count }}</span
                  >{{ row.unit }}</p
                >
              </template>
            </el-table-column>
            <el-table-column
              v-hasRole="['super_admin', 'platform_admin', 'tenant_admin', 'shop_admin']"
              label="操作"
              width="80"
              align="center"
              fixed="right"
            >
              <template #default="scope">
                <el-button
                  v-hasRole="['super_admin', 'platform_admin', 'tenant_admin', 'shop_admin']"
                  link
                  type="primary"
                  @click="openForm('update', scope.row.id)"
                >
                  编辑
                </el-button>
                <br />
                <el-button
                  v-hasRole="['shop_admin']"
                  link
                  type="danger"
                  @click="handleDelete(scope.row.id)"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
    </ContentWrap>

    <ProductForm ref="formRef" @success="refreshProduct" />
  </el-drawer>
</template>

<script lang="ts" setup name="GrouponProduct">
import * as GrouponProductApi from '@/api/mall/promotion/groupon/product'
import { fenToYuan } from '@/utils'
import ProductForm from './ProductForm.vue'

const { t } = useI18n()
const message = useMessage()

const emit = defineEmits(['refresh'])

const dialogVisible = ref(false)

const tableData = reactive({
  loading: true,
  list: [],
  searchParam: {
    packageId: ''
  }
})

const loadTableData = () => {
  tableData.loading = true
  GrouponProductApi.getList(tableData.searchParam.packageId)
    .then((res: any) => {
      tableData.loading = false
      tableData.list = res
    })
    .catch(() => {
      tableData.loading = false
    })
}

const refreshProduct = () => {
  loadTableData()
  emit('refresh')
}

const open = (packageId: number | string) => {
  dialogVisible.value = true
  tableData.searchParam.packageId = packageId as string
  loadTableData()
}
defineExpose({
  open
})

const formRef = ref()
const openForm = (type: string, id?: number | string) => {
  formRef.value.open(type, tableData.searchParam.packageId, id)
}
const handleDelete = async (id: number | string) => {
  try {
    await message.delConfirm()
    await GrouponProductApi.deleteById(id)
    message.success(t('common.delSuccess'))
    loadTableData()
  } catch {}
}
</script>
